<template>
  <el-popover
    v-model:visible="visible"
    show-arrow
    placement="bottom"
    :width="popWidth"
    trigger="manual"
    :style="{'margin-right': marginRight, 'margin-left': marginLeft}"
  >
    <template #reference>
      <el-button
        type="text"
        size="mini"
        style="color: #666"
        @click="visible = !visible"
      >
        <span>更多搜索</span>
        <i
          class="iconfont icon-xiajiantou"
          style="margin-left:3px;font-size: 8px;"
        />
      </el-button>
    </template>
    <div style="padding-top: 20px">
      <el-form
        v-if="bool"
        ref="forms"
        :model="formData"
        size="mini"
        label-width="80px"
      >
        <el-form-item label="操作人">
          <el-select
            v-model="formData.creatorId"
            style="width: 100%"
            placeholder="请选择负责人"
          >
            <el-option
              v-for="item in creatorIdList"
              :key="item.id"
              :label="item.realName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="总金额">
          <div style="display: flex">
            <el-input
              v-model="formData.totalAmountStart"
              style="width: 45%"
              placeholder="最小金额"
            />
            <div> ——</div>
            <el-input
              v-model="formData.totalAmountEnd"
              style="width: 45%"
              placeholder="最大金额"
            />
          </div>

        </el-form-item>
        <el-form-item label="营销回款">
          <div style="display: flex">
            <el-input
              v-model="formData.totalAmountStart"
              style="width: 45%"
              placeholder="最小金额"
            />
            <div> ——</div>
            <el-input
              v-model="formData.totalAmountEnd"
              style="width: 45%"
              placeholder="最大金额"
            />
          </div>
        </el-form-item>

        <el-form-item>
          <el-button
            size="mini"
            class="border-btn"
            @click="onCancel"
          >取消</el-button>
          <el-button
            size="mini"
            class="border-btn"
            @click="onReset"
          >重置</el-button>
          <el-button
            type="primary"
            size="mini"
            class="main-btn"
            @click="onSubmit"
          >确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-popover>
</template>

<script>
import {defineComponent, inject, onMounted, reactive, toRefs,} from 'vue'

export default defineComponent({
  props: {
    popoverWidth: {
      type: Number,
      default: 350,
    },
    left: {
      type: String,
      default: '0px',
    },
    right: {
      type: String,
      default: '0px',
    },
  },
  setup(props, context) {
    const api = inject('api')
    var data = reactive({
      forms: null,
      bool: null,
      visible: null,
      popWidth: props.popoverWidth,
      marginLeft: props.left,
      marginRight: props.right,
      formData: {
        creatorId: 0,
        totalAmountStart: 0,
        totalAmountEnd: 0,
      },
      creatorIdList: [],
    })

    // 获取负责人
    const handlList = () => {
      api.terminal.HEAD_PEOPLE(1).then((res) => {
        if (res.code === 0) {
          data.creatorIdList = res.data
        }
      })
    }

    const onReset = () => {
      data.formData = {
        creatorId: 0,
        totalAmountStart: 0,
        totalAmountEnd: 0,
      }
    }
    const onSubmit = () => {
      context.emit('formValue', data.formData)
      console.log('-=-=-=', data.visible, data.formData)
      data.visible = false
    }
    const onCancel = () => {
      data.visible = false
      onReset()
    }
    onMounted(() => {
      data.bool = true
      handlList()
    })

    return {
      ...toRefs(data),

      onSubmit,
      onCancel,
      onReset,
      handlList,
    }
  },
})
</script>

